<template>
  <!-- 将弹窗的元素挂载到body元素上 -->
  <!--to  -->
  <teleport to="body">
    <div class="modal">
      <h3>我是一个弹窗</h3>
    </div>
  </teleport>

</template>

<script setup lang="ts">


</script>

<style scoped>
.modal {
  margin-top: 10px;
  width: 200px;
  height: 200px;
  background-color: rgb(157, 207, 124);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
